<template>
  <div>
    <!-- 按钮类型说明 -->
    <div class="demo-inner-divider">按钮类型</div>
    <div class="button">
      <div>
        <e-button type="primary">主按钮</e-button>
        <p>button-primary</p>
      </div>
      <div>
        <e-button type="secondary">二级按钮</e-button>
        <p>button-secondary</p>
      </div>
      <div>
        <e-button type="error">危险按钮</e-button>
        <p>button-error</p>
      </div>
      <div>
        <e-button type="drop">链接按钮</e-button>
        <p>button-drop</p>
      </div>
    </div>
    <!-- 长按钮说明 -->
    <div class="demo-inner-divider">长按钮</div>
    <div class="button-long">
      <div>
        <e-button
          type="primary"
          long>主按钮</e-button>
      </div>
      <div>
        <e-button
          type="secondary"
          long>二级按钮</e-button>
      </div>
      <div>
        <e-button
          type="error"
          long>危险按钮</e-button>
      </div>
    </div>
    <!-- 反白按钮 -->
    <div class="demo-inner-divider">反白按钮</div>
    <div class="button-ghost">
      <div>
        <e-button
          type="primary"
          ghost>主按钮</e-button>
      </div>
      <div>
        <e-button
          type="error"
          ghost>危险按钮</e-button>
      </div>
    </div>
    <!-- 按钮尺寸说明 -->
    <div class="demo-inner-divider">按钮尺寸</div>
    <div class="explainText">标准<span>button-primary</span></div>
    <div class="button">
      <div>
        <e-button type="primary">主按钮</e-button>
      </div>
      <div>
        <e-button type="secondary">二级按钮</e-button>
      </div>
      <div>
        <e-button type="error">危险按钮</e-button>
      </div>
      <div>
        <e-button type="drop">链接按钮</e-button>
      </div>
    </div>
    <div class="explainText">中型<span>button-primary-middle</span></div>
    <div class="button">
      <div>
        <e-button
          type="primary"
          size="middle">主按钮</e-button>
      </div>
      <div>
        <e-button
          type="secondary"
          size="middle">二级按钮</e-button>
      </div>
      <div>
        <e-button
          type="error"
          size="middle">危险按钮</e-button>
      </div>
      <div>
        <e-button
          type="drop"
          size="middle">链接按钮</e-button>
      </div>
    </div>
    <div class="explainText">小型<span>button-primary-small</span></div>
    <div class="button">
      <div>
        <e-button
          type="primary"
          size="small">主按钮</e-button>
      </div>
      <div>
        <e-button
          type="secondary"
          size="small">二级按钮</e-button>
      </div>
      <div>
        <e-button
          type="error"
          size="small">危险按钮</e-button>
      </div>
      <div>
        <e-button
          type="drop"
          size="small">链接按钮</e-button>
      </div>
    </div>
    <!-- 按钮状态说明 -->
    <div class="demo-inner-divider">按钮状态</div>
    <div class="explainText">不可用<span>通过添加disabled属性可将按钮设置为不可用状态</span></div>
    <div class="button">
      <div>
        <e-button
          type="primary"
          disabled>主按钮</e-button>
      </div>
      <div>
        <e-button
          type="secondary"
          disabled>二级按钮</e-button>
      </div>
      <div>
        <e-button
          type="error"
          disabled>危险按钮</e-button>
      </div>
      <div>
        <e-button
          type="drop"
          disabled>链接按钮</e-button>
      </div>
    </div>
    <div class="explainText">加载中<span>通过添加loading属性可以让按钮处于加载中状态</span></div>
    <div class="button">
      <div>
        <e-button
          type="primary"
          loading>主按钮</e-button>
      </div>
      <div>
        <e-button
          type="secondary"
          loading>二级按钮</e-button>
      </div>
      <div>
        <e-button
          type="error"
          loading>危险按钮</e-button>
      </div>
      <div>
        <e-button
          type="drop"
          loading>链接按钮</e-button>
      </div>
    </div>
    <!-- 图标按钮 -->
    <div class="demo-inner-divider">图标按钮</div>
    <div class="explainText">ICON+文字描述<span>通过设置icon属性在Button内嵌入一个Icon</span></div>
    <div class="button">
      <div>
        <e-button
          type="primary"
          icon="search">主按钮</e-button>
      </div>
      <div>
        <e-button
          type="secondary"
          icon="search">二级按钮</e-button>
      </div>
      <div>
        <e-button
          type="error"
          icon="search">危险按钮</e-button>
      </div>
      <div>
        <e-button
          type="drop"
          icon="search">链接按钮</e-button>
      </div>
    </div>
    <!-- ICON按钮 -->
    <div class="explainText">ICON<span>通过设置icon属性在Button内嵌入一个Icon</span></div>
    <div class="button">
      <div>
        <e-button
          type="primary"
          icon="search"></e-button>
      </div>
      <div>
        <e-button
          type="secondary"
          icon="search"></e-button>
      </div>
      <div>
        <e-button
          type="error"
          icon="search"></e-button>
      </div>
      <div>
        <e-button
          type="drop"
          icon="search"></e-button>
      </div>
    </div>
    <!-- 按钮组 -->
    <!-- <div class="demo-inner-divider">按钮组</div>
    <div class="explainText">单选按钮组<span>将多个 Button 放入 Button.Group 的容器中进行单选</span></div>
    <div class="button">
      <div class="explainText">标准：</div>
      <Button-group>
        <Button>今天</Button>
        <Button>近7天</Button>
        <Button>近一个月</Button>
      </Button-group>
    </div>
    <div class="button">
      <div class="explainText">中：</div>
      <Button-group size="middle">
        <Button>今天</Button>
        <Button>近7天</Button>
        <Button>近一个月</Button>
      </Button-group>
    </div>
    <div class="button">
      <div class="explainText">小：</div>
      <Button-group size="small">
        <Button>今天</Button>
        <Button>近7天</Button>
        <Button>近一个月</Button>
      </Button-group>
    </div>
    <div class="button">
      <div class="explainText">圆角：</div>
      <Button-group shape="circle">
        <Button>今天</Button>
        <Button>近7天</Button>
        <Button>近一个月</Button>
      </Button-group>
    </div> -->
    <!-- 按钮组纵向排序 -->
    <!-- <div class="explainText">按钮组纵向排列<span>通过设置ButtonGroup的属性vertical，可以使按钮组纵向排列</span></div>
    <div class="button">
      <Button-group vertical>
        <Button>今天</Button>
        <Button>近7天</Button>
        <Button>近一个月</Button>
      </Button-group>
    </div> -->
    <!-- 多个按钮组合 -->
    <button-md class="markdown-body"></button-md>
  </div>
</template>
<script>
import buttonMd from '../../docs/button.md';
export default {
  name: 'buttonExamples',
  components: {
    buttonMd
  },
  data () {
    return {

    }
  }
}
</script>
<style scoped>
.button{
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
}
.button-long{
  margin: 10px 0px;
}
.button-long > div{
  margin: 10px 0px;
}
.button-ghost {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  background-color: #212121;
  padding: 30px 30px;
}
.button-ghost > div {
  margin-right: 50px ;
}
.explainText{
  display: flex;
  font-size: 14px;
  color:#6236FF;
  margin: 10px 0px;
}
.explainText > span{
  font-size: 12px;
  color:#6F7D96;
  padding-left:10px;
}
.button > div{
    margin-right: 50px ;
  }
.button p {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  color:#6F7D96;
  margin-bottom: 10px;
}
</style>
